<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 数据表格</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">


    <style>
        th,td{
            text-align: center;
        }
        th{
            width: 132px;
        }
        #money{
            width: 171px;
            height: 35px;
            /*border: 1px solid red;*/
            display: inline-block;
            text-align: center;
            line-height: 34px;
            font-size: 23px;
            color: red;
            margin-left: 15px;
        }

        #date{
            border-color: #cfdadd;
            border-radius: 2px;
            width:300px;
            height: 30px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            margin-left: 10px;
            background-color: #fff;
            background-image: none;
            border: 1px solid #cfdadd;
            box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }

        #num{
            border-color: #cfdadd;
            border-radius: 2px;
            width:300px;
            height: 30px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            margin-left: 10px;
            background-color: #fff;
            background-image: none;
            border: 1px solid #cfdadd;
            box-shadow: none;
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        }
        #date-add{
            float: right;
            margin-right: 160px;
        }

        #num-add{
            float: right;
            margin-right: 160px;
        }

        #layer-date{
            position: absolute;
            left:100px;
            /*top:55px;*/
            padding: 0;
            margin-left: 200px;
            margin-top: -5px;
            margin-bottom: -31px;
            border: 0;
            width: 550px;
            float: left;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <button type="button" id="addaccount" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">
                        添加账号
                    </button>

                    <form method="post" action="account" role="form" >
                        <div class="form-group" id="layer-date" >
                            <div class="col-sm-5" style="width: 220px;">
                                <input class="form-control layer-date"  name="start_date" value="" placeholder="请选择开始时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                            </div>
                            {!! csrf_field() !!}
                            <div class="col-sm-5" style="width: 220px;">
                                <input class="form-control layer-date" name="end_date" value="" placeholder="请选择结束时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                            </div>
                            <button class="btn btn-primary" style="margin-left: 15px; margin-top: 1px;" type="submit">查询</button>
                        </div>
                    </form>
                </div>

                <div class="ibox-content" >

                    <table class="table table-striped table-bordered table-hover dataTables-example">



                        <thead>
                            <tr>
                                <th>账号</th>
                                <th>密码</th>
                                <th>连接数</th>
                                <th>创建时间</th>
                                <th>到期时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(!empty($data['account']))
                            @foreach($data['account'] as $item)
                                <tr class="gradeX">
                                    <td>{{ $item['username'] }}</td>
                                    <td>{{ $item['password'] }}</td>
                                    <td>{{ $item['connect_num'] }}</td>
                                    <td>{{ $item['created_at'] }}</td>
                                    <td>{{ $item['expired_at'] }}</td>
                                    <td><button class="btn btn-info" data-toggle="modal" data-target="#{{ $item['id'] }}" type="button"><i class="fa fa-paste"></i> 编辑</button>
                                        <a class="btn btn-success " href="/getaccountonlieInfo?account_id={{ $item['id']}}"  type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">详情</span>
                                        </a>
                                    </td>
                                </tr>

                                <div class="modal inmodal fade" id="{{$item['id']}}" tabindex="-1" role="dialog"  aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="modal-title">修改账号信息</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form class="form-horizontal" method="post" action="/updateAccount">
                                                    <div class="form-group">
                                                        <label style="margin: 10px -117px  0px 70px; " class="col-sm-3 control-label">用户名：</label>
                                                        <div class="col-sm-8">
                                                            <input type="text" style="margin-top: 3px;" name="username" value="{{ $item['username'] }} " placeholder="用户名 -- (英文字母加数字)"  class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label style="margin: 33px -117px 0px 70px;" class="col-sm-3 control-label">密码：</label>
                                                        <div class="col-sm-8">
                                                            <input type="text" style="margin-top: 27px;" name="password" value="{{ $item['password'] }} "  placeholder="密码" class="form-control">
                                                        </div>
                                                    </div>

                                                    <input type="hidden" name="account_id" value="{{  $item['id'] }}">
                                                    {!! csrf_field() !!}

                                                    <div class="modal-footer" style=" margin-top: 116px;text-align: center;">
                                                        <button type="button" class="btn btn-w-m btn-white" data-dismiss="modal">关闭</button>
                                                        <button type="submit" id="commit" class="btn btn-w-m btn-primary">修改</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @endforeach
                        @else
                            <tr class="gradeX">
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                            </tr>
                        @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div  class="modal inmodal fade"  id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">添加账号</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal" method="post" action="/addAccount">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户名：</label>

                            <div class="col-sm-8">
                                <input type="text" id="name" name="username" value="" placeholder="用户名 -- (英文字母加数字)"  class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码：</label>
                            <div class="col-sm-8">
                                <input type="password" id="password" name="password" value=""  placeholder="密码" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">连接数：</label>
                            <div class="col-sm-8">
                                <button class="btn btn-success " id="num-remove" style="float: left" type="button">-
                                </button>
                                <input type="text" name="concent_num" style="text-align: center;"  id="num" value="1" placeholder="请输入连接数" >
                                <button class="btn btn-success " id="num-add" type="button">+</button>
                            </div>
                        </div>
                        <input type="hidden" id="danjia"  value="30">
                        {!! csrf_field() !!}
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用户类型：</label>
                            <div class="col-sm-8">
                                    <input type="checkbox" name="type" value="1" id="inlineCheckbox1">普通用户&nbsp;&nbsp;
                                    <input type="checkbox" name="type" value="2" value="option2" id="inlineCheckbox2">特殊用户  &nbsp;  &nbsp;  (暂时只支持普通用户开通)
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">天数：</label>
                            <div class="col-sm-8">
                                <button class="btn btn-success " style="float: left" id="date-remove" type="button">-
                                </button>
                                    <input type="text" name="date" style="text-align: center;" id="date" value="1" placeholder="请输入月数" >
                                <button class="btn btn-success " id="date-add" type="button">+
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">金额：</label>
                            <span class="money"></span>  <span style="font-size: 24px; color:red;">元</span>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                            <button type="submit" id="commit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>



<script src="js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- Data Tables -->
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>

<script src="js/plugins/layer/laydate/laydate.js"></script>



<!-- Page-Level Scripts -->
<script>

    $(function(){
            $('.money').text('￥'+$('#danjia').val());

            $('#date-add').on('click',function(){
                var date= parseInt($('#date').val());
                if(date<10000){
                    $('#date').val( date+1 );
                }
                check();
            });
            $('#num-remove').on('click',function(){
                var num = parseInt($('#num').val());
                if(num>1){
                    $('#num').val( num-1 );
                }
                check();
            });


        $('#num-add').on('click',function(){
            var num= parseInt($('#num').val());
            if(num<10000){
                $('#num').val( num+1 );
            }
            check();
        });

        $('#date-remove').on('click',function(){
            var date = parseInt($('#date').val());
            if(date>1){
                $('#date').val( date-1 );
            }
            check();
        });

        function check(){
            var date = parseInt($('#date').val());
            var num = parseInt($('#num').val());
            $('.money').text('￥'+(date*$('#danjia').val()*num));
        }

    });


    $(function(){

        $('#num').bind('input onchange', function() {
            var num = $(this).val();
           if(num<0)
           {
               $(this).val(0);
           }
            checkMoney();
        });


        $('#date').bind('input onchange', function() {
            var date = $(this).val();
            if(date<0)
            {
                $(this).val(0);
            }
            checkMoney();
        });


        function checkMoney(){
            var date = parseInt($('#date').val());
            var num = parseInt($('#num').val());
            if($('#num').val() =="")
            {
                $('.money').text('￥'+'');
            }else if($('#date').val() =="" && $('#num').val() !=""){
                $('.money').text('￥'+($('#danjia').val()*num));
            }else{
                $('.money').text('￥'+(date*$('#danjia').val()*num));

            }
        }
    });


    $("#commit").click(function(){

        var ch_reg = /^[u4E00-u9FA5{u-z}]+$/;//筛选包含汉字的字符
        var $user_name = $("#name").val();
        if($.trim($user_name.val()) == ''){
            alert('用户名不能为空');
        }
        if(!ch_reg.test($.trim($user_name.val()))){
            alert('不可输入汉字');
        }

        var passowrd = $("#passowrd").val();
        alert(passowrd);
        if($.trim(passowrd.val()) == ''){
            alert('密码不能为空');
        }

    });

</script>
<script>
    $(document).ready(function () {
        $('.dataTables-example').dataTable();

        /* Init DataTables */
        var oTable = $('#editable').dataTable();

        /* Apply the jEditable handlers to the table */
        oTable.$('td').editable('../example_ajax.php', {
            "callback": function (sValue, y) {
                var aPos = oTable.fnGetPosition(this);
                oTable.fnUpdate(sValue, aPos[0], aPos[1]);
            },
            "submitdata": function (value, settings) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oTable.fnGetPosition(this)[2]
                };
            },

            "width": "90%",
            "height": "100%"
        });


    });

    function fnClickAddRow() {
        $('#editable').dataTable().fnAddData([
            "Custom row",
            "New row",
            "New row",
            "New row",
            "New row"]);

    }
</script>





</body>

</html>
